<div id="<?php echo $uniqid;?>" style="padding:5px">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF" v-for="(vo, index) in params">
            <td class="tlabel" >{{ vo.title }}：</td>
            <td v-if="vo.input_mode=='text'">
                <el-input
                          v-model="vo.value"
                          size="small"
                          :readonly="vo.readonly=='1'"
                          :style="'width: ' + vo.width + 'px'"
                          :placeholder="'请输入'+vo.title+'..'">
                    <template v-if="vo.prepend" slot="prepend">{{vo.prepend}}</template>
                    <template v-if="vo.append" slot="append">{{vo.append}}</template>
                </el-input>
                <div v-if="vo.tips" class="tips">{{ vo.tips }}</div>
            </td>
            <td v-if="vo.input_mode=='textarea'">
                <el-input
                        type="textarea"
                        :rows="2"
                        :readonly="vo.readonly=='1'"
                        :placeholder="'请输入'+vo.title+'..'"
                        v-model="vo.value">
                </el-input>
                <div v-if="vo.tips" class="tips">{{ vo.tips }}</div>
            </td>
            <td v-if="vo.input_mode=='bool'">
                <el-switch
                        v-model="vo.value"
                        active-color="#13ce66"
                        inactive-color="#cccccc"
                        active-value="1"
                        inactive-value="0"
                ></el-switch>
                <div v-if="vo.tips" class="tips">{{ vo.tips }}</div>
            </td>
            <td v-if="vo.input_mode=='radio'">
                <el-radio-group v-model="vo.value">
                    <el-radio v-for="(voo,idx) in vo.items" :label="voo">{{voo}}</el-radio>
                </el-radio-group>
                <div v-if="vo.tips" class="tips">{{ vo.tips }}</div>
            </td>
            <td v-if="vo.input_mode=='checkbox'">
                <el-checkbox-group v-model="vo.value">
                    <el-checkbox v-for="(voo,idx) in vo.items" :label="voo">{{voo}}</el-checkbox>
                </el-checkbox-group>
                <div v-if="vo.tips" class="tips">{{ vo.tips }}</div>
            </td>
            <td v-if="vo.input_mode=='image'">
                <div title="上传图片" style="display: flex; height: 80px; overflow: hidden;">
                    <div class="img-box" v-if="vo.value">
                        <a class="linkWrapper" target="_blank" :href="vo.value" title="查看原图">
                            <img height="70px" :src="vo.value+'?imageView2/1/w/100/h/100'"></a>
                        <div class="img-box-del" @click="vo.value=''">
                            <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                        </div>
                    </div>
                    <div class="add-image-button" v-else>
                        <a class="btn btn-default btn-lg" @click="uploadBox('configVm.params['+index+'].value')" href="javascript:void(0);">
                            <i class="iconfont icon-tianjia"></i>
                        </a>
                    </div>
                    <div v-if="vo.tips" class="tips">{{ vo.tips }}</div>
                </div>
            </td>
            <td v-if="vo.input_mode=='images'">
                <div title="上传多张图片" style="display: flex; height: 80px; overflow: hidden;">
                    <div class="img-box" v-if="vo.value.length>0" v-for="(img, imgIdx) in vo.value">
                        <a class="linkWrapper" target="_blank" :href="img" title="查看原图">
                            <img height="70px" :src="img+'?imageView2/1/w/100/h/100'"></a>
                        <div class="img-box-del" @click="vo.value.splice(imgIdx, 1)">
                            <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                        </div>
                    </div>
                    <div class="add-image-button">
                        <a class="btn btn-default btn-lg" @click="uploadBox('configVm.params['+index+'].value')" href="javascript:void(0);">
                            <i class="iconfont icon-tianjia"></i>
                        </a>
                    </div>
                    <div v-if="vo.tips" class="tips">{{ vo.tips }}</div>
                </div>
            </td>
            <td v-if="vo.input_mode=='file'">
                <el-input class="local-ajax-upload-wrap" v-model="vo.value" :placeholder="vo.tips" size="small">
                    <template slot="append">
                        <label :for="vo.key">上传</label>
                        <input class="local-ajax-upload" :id="vo.key" type="file" @change="ajaxUpload(vo)">
                    </template>
                </el-input>
            </td>
        </tr>
    </table>
</div>
<script>
    var configVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            params: JSON.parse("<?php echo addslashes($dataset);?>"),
        },
        mounted() {
            this.init();
        },
        methods: {
            init(){},
            submit(){
                $.ajax({
                    url:'/admin/config/edit',
                    type:"POST",
                    data: JSON.stringify(configVm.params),
                    contentType:"application/json; charset=utf-8",
                    dataType:"json",
                    success: function(data){
                        if (parseInt(data.ret) === 0) {
                            $.messager.show({
                                title: '提示',
                                msg: data.msg,
                                timeout: 3000,
                                showType: 'slide'
                            });
                            $("#configDlg").dialog('close');
                            if (typeof configReload == "function") {
                                configReload();
                            }
                        } else {
                            $.messager.alert('提示', data.msg, 'warning');
                        }
                    }
                });
            },
            ajaxUpload(vo) {
                let id = vo.key;
                let that = this;
                var formData = new FormData();
                formData.append("file", $('#<?php echo $uniqid;?> #' + id)[0].files[0]);
                $.ajax({
                    type: "post",
                    url: "/admin/index/uploadToServer",
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.ret === 0) {
                            vo.value = data.data;
                        } else {
                            $.messager.alert('提示', data.msg, 'warning');
                        }
                    }
                })
            },
        }
    });
    $(function () {
        $('#configsubmit').click(function () {
            configVm.submit();
        });
    });
</script>

<style>
    .tips{
        font-size: 10px;
        color:#999;
        line-height: 25px;
        padding: 5px;
    }
    .local-ajax-upload-wrap label {
        color: #7536D0;
        margin: 0;
        cursor: pointer;
    }
    .local-ajax-upload-wrap .local-ajax-upload {
        display: none !important;
    }
</style>